<template>
  <div class="seller"
       ref="seller">
    <div class="seller-content">
      <div class="overview relative">
        <h3 class="name f14 fw500">{{ seller.name }}</h3>
        <div class="desc border-1px-bottom flex-def flex-cCenter">
          <star :size="36"
                :score="seller.score"> </star>
          <p class="text">({{ seller.ratingCount }})</p>
          <p class="text">月售{{ seller.sellCount }}单</p>
        </div>
        <ul class="remark flex-def">
          <li class="block">
            <h3>起送价</h3>
            <div class="content">
              <span>{{ seller.minPrice }}</span>元
            </div>
          </li>
          <li class="block">
            <h3>商家配送</h3>
            <div class="content">
              <span>{{ seller.deliveryPrice }}</span>元
            </div>
          </li>
          <li class="block">
            <h3>平均配送时间</h3>
            <div class="content">
              <span>{{ seller.deliveryTime }}</span>元
            </div>
          </li>
        </ul>
        <div class="favorite absolute">
          <span class="icon icon-favorite f24 poi"
                :class="{ active: favorite }"
                @click.stop="toggleFavorite"></span>
          <span class="text f12 fw500">{{ favoriteText }}</span>
        </div>
      </div>
      <split></split>
      <div class="bulletin">
        <h4 class="fw500 f12">公告与活动</h4>
        <div class="content-wrapper border-1px-bottom">
          <p class="content">{{ seller.bulletin }}</p>
        </div>
        <div class="supports-wrapper"
             v-if="seller.supports && seller.supports.length">
          <supports :supports="seller.supports"
                    :topFlag="Boolean(false)">
          </supports>
        </div>
      </div>
      <split></split>
      <div class="pics"
           v-if="seller.pics && seller.pics.length">
        <h3 class="f12 fw500">商家实景</h3>
        <div class="pics-wrapp"
             ref="pics">
          <ul ref="picUl">
            <li class="pics-item inline-block"
                v-for="(pic, index) in seller.pics"
                :key="index">
              <img :src="pic"
                   alt=""
                   width="120"
                   height="90" />
            </li>
          </ul>
        </div>
      </div>
      <split></split>
      <div class="info">
        <h3 class="f12 fw500 border-1px-bottom">商家信息</h3>
        <ul>
          <li class="info-item border-1px-bottom"
              v-for="(item, index) in seller.infos"
              :key="index">
            {{ item }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll';
import Star from 'components/Star/Star';
import Split from 'components/Split/Split';
import Supports from 'components/Supports/Supports';
import { seller } from 'mixin';
import { saveToLocal, loadFromLocal } from 'common/js/storage';
import { timeout } from 'common/js/utils';

export default {
  'name': 'seller',
  'mixins': [seller],
  data() {
    return { 'favorite': false };
  },
  'components': { Star, Split, Supports },
  created() {
    // data数据已经初始化，但是DOM结构渲染完成，组件没有加载
    this.favorite = loadFromLocal(this.seller.id, 'favorite', false);
  },
  mounted() {
    // DOM渲染完成，组件挂载完成
    this._initScroll();
    this._picInit();
  },
  'computed': {
    favoriteText() {
      return this.favorite ? '已收藏' : '收藏';
    }
  },
  'methods': {
    async _initScroll() {
      await timeout(300);
      if (!this.scroll) this.scroll = new BScroll(this.$refs.seller, {
        'click': true
      });
      else this.scroll.refresh();
    },
    async _picInit() {
      const width = 120;
      const margin = 6;
      await timeout(300);
      this.$refs.picUl.style.width =
        (width + margin) * this.seller.pics.length - margin + 'px';
      if (!this.picScroll) this.picScroll = new BScroll(this.$refs.pics, {
        'eventPassthrough': 'vertical',
        'scrollX': true
      });
      else this.picScroll.refresh();
    },
    toggleFavorite(event) {
      if (!event._constructed) return;
      let favorite = !this.favorite;
      this.favorite = favorite;
      saveToLocal(this.seller.id, 'favorite', favorite);
    }
  },
  'watch': {
    seller(newData, oldData) {
      this._initScroll();
      this._picInit();
    }
  }
};
</script>

<style lang="stylus" rel="stylesheet/stylus">
@import '~common/stylus/mixin'
.seller
  position absolute
  top 174px
  bottom 0
  left 0
  width 100%
  overflow hidden
.seller-content
  .overview
    padding(18, 18, 18, 18)
    .name
      color #333
      line-height 14px
      height 14px
      margin-bottom 6px
    .desc
      border-1px-bottom(rgba(7, 17, 27, 0.15))
      padding-bottom 15px
      .text
        color #666
        font-size 10px
        line-height 18px
        margin-right 12px
        font-weight 400
    .remark
      padding-top 18px
      li
        flex 1
        text-align center
        border-right 1px solid #d9dde1
        &:last-child
          border-right 0
        h3
          font-size 10px
          font-weight 600
          color #999
          margin-bottom 4px
        .content
          font-size 10px
          color #333
          line-height 16px
          font-weight 300
          span
            font-size 20px
            margin-right 1px
    .favorite
      width 50px
      right 11px
      top 15px
      display flex
      flex-direction column
      text-align center
      .icon
        color #ccc
        margin-bottom 5px
        line-height 24px
        &.active
          color #f01414
      .text
        color #666
  .bulletin
    padding(18, 18, 0, 18)
    h4
      color #333
    .content-wrapper
      padding(0, 12, 15, 12)
      border-1px-bottom(rgba(7, 17, 27, 0.2))
      p
        font-size 12px
        color #f01414
        margin-top 10px
        line-height 25px
        font-weight 500
  .supports
    .icon
      &.decrease
        bg-image('decrease_4', 16, 16)
      &.discount
        bg-image('discount_4', 16, 16)
      &.guarantee
        bg-image('guarantee_4', 16, 16)
      &.invoice
        bg-image('invoice_4', 16, 16)
      &.special
        bg-image('special_4', 16, 16)
    .supports-item
      padding(16px, 0, 16px, 12px)
      margin-bottom 0
      border-1px-bottom(rgba(7, 17, 27, 0.15))
      &:last-child
        border-none()
      strong
        font-weight 300
        color #333
  .pics
    padding(18, 18, 18, 18)
    h3
      color #333
      margin-bottom 10px
    .pics-wrapp
      width 100%
      white-space nowrap
      overflow hidden
      ul
        li
          width 120px
          height 90px
          margin-right 6px
  .info
    padding(18, 18, 18, 18)
    h3
      padding-bottom 15px
      border-1px-bottom(rgba(7, 17, 27, 0.15))
    .info-item
      padding(15, 15, 15, 15)
      line-height 15px
      border-1px-bottom(rgba(7, 17, 27, 0.15))
      &:last-child
        border-none()
</style>
